<template>
  <view class="navigation">
    <view class="logo">今日新闻</view>
    <view class="menu">
      <text class="iconfont icon-menu" @click="toggleMenu"></text>
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    toggleMenu() {
      // 这里可以添加菜单展开或收起的逻辑
    }
  }
};
</script>

<style scoped>
.navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #0e9a9c; /* 设置一个好看的背景颜色 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 添加阴影以提升层次感 */
}

.logo {
  font-size: 20px;
  font-weight: bold;
  color: #ffffff; /* 设置文字颜色 */
}

.menu {
  display: flex;
  align-items: center;
}

.icon-menu {
  font-size: 24px;
  color: #ffffff; /* 设置图标颜色 */
}

.iconfont {
  /* 如果你使用的是第三方图标库，确保已经引入了相应的样式 */
}
</style>